    <template>
  <div>
    <!--新增排班规则开始-->
    <el-dialog title="新增排班规则" :visible.sync="dialogVisible" width="90%">
      <el-form
        :model="ruleForm1"
        :rules="rules"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row :gutter="3">
          <el-col :span="5">
            <el-form-item label="科室选择:" prop="noon">
              <el-select v-model="ruleForm1.deptId" placeholder="请选择">
                <!--这个需要根据上面的选择动态加载出来-->
                <el-option
                  v-for="item in depts"
                  :key="item.id"
                  :label="item.deptName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="挂号级别:" prop="registLeId">
              <el-select v-model="ruleForm1.registLeId" placeholder="请选择">
                <!--这个需要根据上面的选择动态加载出来-->
                <el-option
                  v-for="item in registLevels"
                  :key="item.registName"
                  :label="item.registName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm1')"
                >查询</el-button
              >
              <el-button>清空</el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <!--排班星期多选 -->
        <el-table
          ref="multipleTable"
          :data="tableData2"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="医生编号" width="100" prop="id">
          </el-table-column>
          <el-table-column label="医生名称" width="100" prop="true_name">
          </el-table-column>
          <el-table-column label="一上" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X10"
                v-model="tableData2[scope.$index].X10"
                true-value="1"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="一下" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X11"
                v-model="tableData2[scope.$index].X11"
                true-value="7"
                false-value="20"
              />
            </template>
          </el-table-column>
          <el-table-column label="二上" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X20"
                v-model="tableData2[scope.$index].X20"
                true-value="2"
                false-value="20"
              />
            </template>
          </el-table-column>
          <el-table-column label="二下" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X21"
                v-model="tableData2[scope.$index].X21"
                true-value="8"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="三上" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X30"
                v-model="tableData2[scope.$index].X30"
                true-value="3"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="三下" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X31"
                v-model="tableData2[scope.$index].X31"
                true-value="9"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="四上" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X40"
                v-model="tableData2[scope.$index].X40"
                true-value="4"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="四下" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X41"
                v-model="tableData2[scope.$index].X41"
                true-value="10"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="五上" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X50"
                v-model="tableData2[scope.$index].X50"
                true-value="5"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="五下" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X51"
                v-model="tableData2[scope.$index].X51"
                true-value="11"
                false-value="20"
              />
            </template>
          </el-table-column>

          <el-table-column label="六上" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X60"
                v-model="tableData2[scope.$index].X60"
                true-value="6"
                false-value="20"
              />
            </template>
          </el-table-column>
          <el-table-column label="六下" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X61"
                v-model="tableData2[scope.$index].X61"
                true-value="12"
                false-value="20"
              />
            </template>
          </el-table-column>
          <el-table-column label="日上" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X70"
                v-model="tableData2[scope.$index].X70"
                true-value="0"
                false-value="20"
              />
            </template>
          </el-table-column>
          <el-table-column label="日下" width="70" align="center">
            <template slot-scope="scope">
              <input
                type="checkbox"
                prop="X71"
                v-model="tableData2[scope.$index].X71"
                true-value="13"
                false-value="20"
              />
            </template>
          </el-table-column> </el-table
        ><br />
        规则名称：
        <el-input
          size="mini"
          placeholder="规则名称"
          v-model="ruleForm1.gzmc"
          align="left"
          style="width: 120px"
        ></el-input>
        <el-col :span="10">
          <!-- <el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="pageSize" :total="total">
                    </el-pagination> -->
          <pagination
            :input_data.sync="tableData"
            :output_data.sync="tableData2"
          ></pagination>

        </el-col>

        <br />
        <el-row align="center">
          <el-button type="primary" @click="DialogSave()">保存</el-button>
          <el-button @click="resetForm('ruleForm1')">清空</el-button>
        </el-row>
      </el-form>
    </el-dialog>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>医生排班管理</span>
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item prop="startDate" label="开始时间">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="ruleForm.startDate"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="endDate" label="结束时间">
              <el-date-picker
                placeholder="选择时间"
                v-model="ruleForm.endDate"
                style="width: 100%"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="1">&nbsp; </el-col>
          <el-col :span="11">
            <el-button
              style="float: left; padding: 5px 0"
              type="primary"
              @click="findAll()"
              >查询排班医生</el-button
            >
            <el-button
              style="float: left; padding: 5px 0"
              type="primary"
              @click="newRule()"
              >新增排班规则</el-button
            >
            <el-button style="float: left; padding: 5px 0" type="primary"
              >查询排班规则(生成排班计划)</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <el-table :data="ticket" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="startTimeThisWeek" label="时间" width="120">
        </el-table-column>
        <el-table-column prop="endTimeThisWeek" label="时间" width="120">
        </el-table-column>
        <el-table-column label="午别" width="120" prop="subsectionType">
          <!-- <template slot-scope="ticket.subsectionType">{{ticket.subsectionTypesubsectionType|filterType}}</template> -->
          <template slot-scope="scope">
            {{ scope.row.week | filterType }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="科室" width="120">
        </el-table-column>
        <el-table-column prop="trueName" label="真实姓名" width="120">
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="5">
          <div id="btu">
            <el-button @click="delBatch" type="danger">批量删除</el-button>
          </div>
        </el-col>
        <el-col :span="10">
          <!-- <el-pagination background layout="prev, pager, next" @current-change="changePage" :page-size="pageSize" :total="total">
                    </el-pagination> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>


    <script>
import { getList, getRuleDoc, editSchedul } from "@/api/scheduling/scheduling";
import Pagination from "@/views/test/zujian.vue";
export default {
  data() {
    return {
      newlist: [],
      allList: [],
      multipleSelection: [],
      dialogVisible: false,
      tableData: [],
      tableData2: [], //排班选框
      currentPage: 1,
      pageSize: 5,
      total: 0,
      multipleSelection: [],
      ruleForm: {
        startDate: "",
        endDate: "",
      },
      ruleForm1: {
        deptId: "",
        registLeId: "",
        gzmc: "",
      },
      depts: [],
      registLevels: [],
      weeks: [],
      rules: {},

      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      multipleSelection: [],
      ruleForm: {
        startDate: "",
        endDate: "",
      },
      rules: {},
      single: true,
      multiple: true,
      ticket: [],
    };
  },
  components: { Pagination },
  methods: {
    DialogSave() {
      editSchedul(this.allList).then((response) => {
        if (response.code === 200) {
          this.$message({
            message: "数据加载成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },
    //批量获取
    handleSelectionChange(val) {
      this.allList = val;
    },

    newRuleShow() {
      [0];
      getRuleDoc().then((response) => {
        console.log(response.data + "排班添加数据");
        if (response.code === 200) {
          this.tableData = response.data;
          //获取返回数据的总行数
          this.total = response.data.length;
          // 获取当前页的数据,此方法在下方定义
          //   this.getDoctorInfo();
          //   this.$message({
          //     message: "数据加载成功",
          //     type: "success",
          //   });
        } else {
          // 失败提示信息
          this.$$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },

    newRule() {
      this.dialogVisible = true;
      this.newRuleShow();
    },
    //查询排班全部
    findAll() {
      getList().then((response) => {
        console.log(response.data[0] + "排班数据");
        if (response.code === 200) {
          this.ticket = response.data;
          //获取返回数据的总行数
          this.total = response.data.length;
          // 获取当前页的数据,此方法在下方定义
          this.getDoctorInfo();
          this.$message({
            message: "数据加载成功",
            type: "success",
          });
        } else {
          // 失败提示信息
          this.$$message({
            message: "数据加载错误",
            type: "error",
          });
        }
      });
    },
    getDoctorInfo() {
      // 清空表格的list 数据
      this.list = [];
      console.log(this.list + "這是數據list");
      console.log(this.ticket + "這是數據ticket");
      // 获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pagesize;
        this.total > i;
        i++
      ) {
        this.list.push(this.ticket[i]);
        if (this.list.length === this.pagesize)
          console.log(this.list + "這是數據");
        break;
      }
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      // 修改当前每页的数据行数
      this.pagesize = size;
      // 数据重新分页
      this.getDoctorInfo();
    },
    // 调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber;
      //数据重新分页
      this.getDoctorInfo();
    },
    delBatch() {},
  },
  mounted() {
    //alert("初始加载");
    this.findAll();
  },
  //监听星期的渲染
  filters: {
    filterType: function (val) {
      var typeArr = [
        "星期天  上午",
        "星期一  上午",
        "星期二  上午",
        "星期三  上午",
        "星期四  上午",
        "星期五  上午",
        "星期六  上午",
        "星期天  下午",
        "星期一  下午",
        "星期二  下午",
        "星期三  下午",
        "星期四  下午",
        "星期五  下午",
        "星期六  下午",
      ];
      return typeArr[val];
    },
  },
};
</script>
    <style>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 5px;
}

.box-card {
  width: 100%;
  text-align: left;
}
</style>
